{% extends 'base.html' %}
{% block styles %}
    {{ super() }}
    <!--图标选择器CSS-->
    <link rel="stylesheet"
          href="{{ url_for('static',filename='bootstrap-iconpicker-1.9.0/dist/css/bootstrap-iconpicker.min.css') }}">
    <!-- ztree皮肤 -->
    <link rel="stylesheet" href="{{ url_for('static',filename='zTree_v3/css/metroStyle/metroStyle.css') }}">
    <!-- layui样式 -->
    {#    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}" media="all">#}
    <!-- 验证样式 -->
    <link rel="stylesheet" href="{{ url_for('static',filename='bootstrap_validator/bootstrap-validator.css') }}">
{% endblock %}
{% block title %}菜单管理{% endblock title %}
{% block content %}
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                菜单管理
                <small>菜单管理</small>
            </h1>
        </section>
        <section class="content">
            <div class="box">
                <div class="box-header with-border">
                    <button id="add" type="button" class="btn btn-primary  btn-xs">添加节点</button>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-lg-2 ">
                            <ul id="lzh" class="ztree"></ul>
                        </div>
                        <div class="col-lg-7 col-lg-offset-3">
                            <form id="update" class="form-horizontal">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">
                                                <span>ID</span>
                                            </label>
                                            <div class="col-sm-8">
                                                <input class="form-control" name="id" readonly="readonly">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">
                                                <span>父ID</span>
                                            </label>
                                            <div class="col-sm-8">
                                                <input class="form-control" name="pId" disabled="disabled">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">
                                                <span>URL</span>
                                            </label>
                                            <div class="col-sm-8">
                                                <input class="form-control" name="url" disabled="disabled">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">
                                                <span>菜单名称</span>
                                            </label>
                                            <div class="col-sm-8">
                                                <input class="form-control" name="label" disabled="disabled">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">
                                                <span>排序</span>
                                            </label>
                                            <div class="col-sm-8">
                                                <input class="form-control" name="order" disabled="disabled">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">
                                                <span>图标样式</span>
                                            </label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <span class="input-group-btn">
                                                        <button id="icon_target" class="btn btn-default"></button>
                                                    </span>
                                                    <input class="form-control" name="ico" disabled="disabled">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-md-offset-6">
                                        <div class="form-group">
                                            <div style="margin-left:78%;">
                                                <button id="save" type="submit" class="btn btn-primary"
                                                        disabled="disabled">
                                                    保存
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
{% endblock %}
{% block scripts %}
    {{ super() }}
    <!-- 图标选择器的JS -->
    <!-- 图标选择器的JS -->
    <script type="text/javascript"
            src="{{ url_for('static',filename='bootstrap-iconpicker-1.9.0/dist/js/bootstrap-iconpicker-iconset-all.js') }}"></script>
    <script type="text/javascript"
            src="{{ url_for('static',filename='bootstrap-iconpicker-1.9.0/dist/js/bootstrap-iconpicker.js') }}"></script>
    <!-- ztree的js -->
    <script src="{{ url_for('static',filename='zTree_v3/js/jquery.ztree.core.js') }}"></script>
    <script src="{{ url_for('static',filename='zTree_v3/js/jquery.ztree.excheck.js') }}"></script>
    <script src="{{ url_for('static',filename='zTree_v3/js/jquery.ztree.exedit.js') }}"></script>
    <!-- layui的js -->
    <script src="{{ url_for('static',filename='layui/layui.all.js') }}"></script>
    <!-- 验证样式validator的js -->
    <script src="{{ url_for('static',filename="bootstrap_validator/bootstrap-validator.js") }}"></script>
    <script>
        $('#icon_target').iconpicker({
            align: 'center', // Only in div tag
            cols: 6,
            search: true,
            searchText: '搜索图标',
            footer: true,
            header: true,
            iconset: 'fontawesome', labelHeader: '{0} / {1} 页',
            labelFooter: '{0} - {1} / {2} icons',
            placement: 'bottom', // Only in button tag
            rows: 6,
            selectedClass: 'btn-success',
            unselectedClass: ''
        });
        $('#icon_target').on('change', function (e) {
            $("input[name='ico']").val(e.icon);
        });
    </script>
    <script>
        $(function () {
            $("#update").bootstrapValidator({
                message: '这个值是无效的',
                feedbackIcons: {
                    /*input状态样式图片*/
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    order: {
                        message: 'order验证失败',
                        validators: {
                            notEmpty: {
                                message: 'order地址不能为空'
                            },
                            regexp: {
                                regexp: /^\+?(0|[1-9][0-9]*)$/,
                                message: '请输入一个正整数'
                            }
                        }
                    },
                    pId: {
                        message: 'pId验证失败',
                        validators: {
                            notEmpty: {
                                message: 'pId地址不能为空'
                            },
                            regexp: {
                                regexp: /^\+?(0|[1-9][0-9]*)$/,
                                message: '请输入一个正整数'
                            }
                        }
                    },
                }
            });
        });

        var zTreeObj;
        // zTree 的参数配置
        var setting = {
            async: {
                enable: true,//采用异步加载
                type: "get",
                autoParam: ["id"],//自动提交父ID
                url: "{{ url_for('auth.query_node') }}",
                dataType: "json"
            },
            callback: {
                beforeDrag: beforeDrag, //拽动回调
                beforeRemove: beforeRemove, //删除前询问回调
                onMouseDown: onMouseDown, //鼠标点击
                onDrop: onDrop, //拽动结束"后"的回调
                beforeDrop: beforeDrop //拽东结束"前"回调
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            },
            edit: {
                drag: {
                    autoExpandTrigger: true,
                    isCopy: false,
                    isMove: true,
                    prev: dropPrev,//是否允许移动到前面
                    next: dropNext,//是否允许移动到后面
                    inner: false,//是否允许成为目标子节点
                },
                enable: true,
                showRenameBtn: false,//重命名按钮
                showRemoveBtn: true//移动按钮
            }
        };


        //删除disabled
        function rm_disable() {
            $("input[name='url']").attr("disabled", false);
            $("input[name='pId']").attr("disabled", false);
            $("input[name='label']").attr("disabled", false);
            $("input[name='order']").attr("disabled", false);
            $("input[name='ico']").attr("disabled", false);
            $("#save").attr("disabled", false);
            $("#icon_target").attr("disabled", false);
        }

        //表单点击后赋值
        function assignValue(treeNode) {
            $("input[name='id']").val(treeNode.id)
            $("input[name='url']").val(treeNode.url)
            $("input[name='pId']").val(treeNode.pId)
            $("input[name='order']").val(treeNode.order)
            $("input[name='ico']").val(treeNode.ico)
            if (treeNode.ico.length == 0) {
                $('#icon_target').iconpicker('setIcon', 'empty')
                $("input[name='ico']").val('');
            } else {
                $('#icon_target').iconpicker('setIcon', treeNode.ico)
            }
            $("input[name='label']").val(treeNode.name)
        }

        //鼠标点击后回调函数
        function onMouseDown(event, treeId, treeNode) {
            if (treeNode !== null) {
                rm_disable()
                assignValue(treeNode)
            }
        }

        function beforeDrop(treeId, treeNodes) {
            return confirm("确认调整菜单顺序吗？");
        }

        //拽动后回调函数
        function onDrop(event, treeId, treeNodes, targetNode, moveType) {
            var tree = $.fn.zTree.getZTreeObj("lzh");
            if (targetNode == null) {
                layer.msg("你只是拽了一下没有交换位置,触发回调函数");
            }
            else {
                //判断是否为父节点拽动
                if (treeNodes[0].pId == 0) {
                    var P_nodes = tree.getNodes()
                    var json_object = []
                    //遍历修改oreder顺序
                    $.each(P_nodes, function (i, value) {
                        value.order = i + 1
                        json_object.push({"id": value.id, "order": value.order})
                    })
                    var json = JSON.stringify(json_object);
                    $.ajax({
                        type: "POST",
                        url: "{{ url_for('auth.order') }}",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: json,
                        success: function (res) {
                            if (res.message == 'succeed') {
                                tree.reAsyncChildNodes(null, "refresh");
                                layer.msg("排序成功刷新ztree");
                            }
                            else {
                                alert('后端抛出异常:' + res.message);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert("前端出错,无法提交请求到后端" + errorThrown)
                        }
                    });
                }
                else {
                    //子节点拖动
                    var C_nodes = treeNodes[0].getParentNode().children
                    var json_object = []
                    //遍历修改oreder顺序
                    $.each(C_nodes, function (i, value) {
                        value.order = i + 1
                        json_object.push({"id": value.id, "order": value.order})
                    })
                    var json = JSON.stringify(json_object);
                    $.ajax({
                        type: "POST",
                        url: "{{ url_for('auth.order') }}",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: json,
                        success: function (res) {
                            if (res.message == 'succeed') {
                                tree.reAsyncChildNodes(null, "refresh");
                                layer.msg("排序成功刷新ztree");
                            }
                            else {
                                alert('后端抛出异常:' + res.message);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert("前端出错,无法提交请求到后端" + errorThrown)
                        }
                    });
                }
            }
        };

        //是否允许移动到前面回调函数
        function dropPrev(treeId, nodes, targetNode) {
            var pNode = targetNode.getParentNode();
            if (nodes[0].pId !== targetNode.pId) {
                //console.log("执行了")
                return false;
            }
            else {
                for (var i = 0, l = curDragNodes.length; i < l; i++) {
                    var curPNode = curDragNodes[i].getParentNode();
                    if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
                        return false;
                    }
                }
            }
            //console.log("移动的" + nodes[0].order)
            //console.log("目标的排序" + targetNode.order)
            return true;
        }
        //是否允许移动到后面回调函数
        function dropNext(treeId, nodes, targetNode) {
            var pNode = targetNode.getParentNode();
            if (nodes[0].pId !== targetNode.pId) {
                return false;
            }
            else {
                for (var i = 0, l = curDragNodes.length; i < l; i++) {
                    var curPNode = curDragNodes[i].getParentNode();
                    if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
                        return false;
                    }
                }
            }
            return true;
        }

        //删除确认回调函数
        function beforeRemove(treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("lzh");
            zTree.selectNode(treeNode);
            //判断是否为父节点
            if (treeNode.pId == 0) {
                //判断父节点下是否有子节点
                if (treeNode.check_Child_State == 0) {
                    alert("还存在子节点不能删除!")
                    return false;
                }
                else {
                    var flag = confirm("确认删除节点 -- " + treeNode.name + " 吗？")
                    if (flag) {
                        $.ajax({
                            type: "POST",
                            url: "{{ url_for('auth.menu_delete') }}",
                            data: {"id": treeNode.id},
                            success: function (res) {
                                if (res.message == 'succeed') {
                                    // 刷新ztree
                                    var tree = $.fn.zTree.getZTreeObj("lzh");
                                    tree.reAsyncChildNodes(null, "refresh");
                                    layer.msg("提交成功");
                                    return true;
                                }
                                else {
                                    alert('后端抛出异常:' + res.message);
                                    return false;
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                return false;
                                alert("前端出错,无法提交请求到后端" + errorThrown)
                            }
                        });
                    }
                    else {
                        return false;
                    }
                }
            }
            else {
                var flag = confirm("确认删除 子节点 -- " + treeNode.name + " 吗？")
                if (flag) {
                    $.ajax({
                        type: "POST",
                        url: "{{ url_for('auth.menu_delete') }}",
                        data: {"id": treeNode.id},
                        success: function (res) {
                            if (res.message == 'succeed') {
                                // 刷新ztree
                                var tree = $.fn.zTree.getZTreeObj("lzh");
                                tree.reAsyncChildNodes(null, "refresh");
                                layer.msg("提交成功");
                                return true;
                            }
                            else {
                                alert('后端抛出异常:' + res.message);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert("前端出错,无法提交请求到后端" + errorThrown)
                        }
                    });
                }
                else {
                    return false;
                }
            }
        }

        //拽动回调函数
        var log, className = "dark", curDragNodes, autoExpandNode;
        function beforeDrag(treeId, treeNodes) {
            for (var i = 0, l = treeNodes.length; i < l; i++) {
                if (treeNodes[i].drag === false) {
                    curDragNodes = null;
                    return false;
                } else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
                    curDragNodes = null;
                    return false;
                }
            }
            curDragNodes = treeNodes;
            return true;
        }

        zTreeObj = $.fn.zTree.init($("#lzh"), setting);

        function check() {
            var order = $("input[name='order']").val();
            var pId = $("input[name='pId']").val();
            if (order.length == 0) {

            }
        };

        //增加IP按钮
        $('#save').on('click', function () {
            var data = $("#update").serialize();

            var bootstrapValidator = $('#update').data('bootstrapValidator');
            bootstrapValidator.validate();
            if (bootstrapValidator.isValid()) {
                $.ajax({
                    type: "POST",
                    url: "{{ url_for('auth.menu_add') }}",
                    dataType: "json",
                    data: data,
                    success: function (res) {
                        if (res.message == 'succeed') {
                            // 刷新ztree
                            var tree = $.fn.zTree.getZTreeObj("lzh");
                            tree.reAsyncChildNodes(null, "refresh");
                            layer.msg("提交成功");
                        }
                        else {
                            alert('后端抛出异常:' + res.message);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("前端出错,无法提交请求到后端" + errorThrown)
                    }
                });
            } else {
                layer.msg("表单验证没有通过");
            }
        });

        // 添加子节点的按钮
        $('#add').on('click', function () {
            var tree = $.fn.zTree.getZTreeObj("lzh");
            count = tree.getNodes().length + 1;
            $.ajax({
                type: "POST",
                url: "{{ url_for('auth.menu_add') }}",
                data: {"id": 0, "order": count},
                success: function (res) {
                    if (res.message == 'succeed') {
                        // 刷新ztree
                        var tree = $.fn.zTree.getZTreeObj("lzh");
                        tree.reAsyncChildNodes(null, "refresh");
                        layer.msg("提交成功");
                    }
                    else {
                        alert('后端抛出异常:' + res.message);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("前端出错,无法提交请求到后端" + errorThrown)
                }
            });
        });
    </script>
{% endblock %}